<!DOCTYPE html encoding="UTF-8">
<html>
  <head>
    <title>APRS Geofencing in KML</title>
    <link rel="stylesheet" href="http://openlayers.org/en/v3.14.2/css/ol.css" type="text/css">
    <script src="http://openlayers.org/en/v3.14.2/build/ol.js"></script>
    <script src="https://code.jquery.com/jquery-1.11.2.min.js"></script>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>

    <style>
      #map {
        position: relative;
      }
      #info {
        position: absolute;
        height: 1px;
        width: 1px;
        z-index: 100;
      }
      .tooltip.in {
        opacity: 1;
        filter: alpha(opacity=50);
      }
      .tooltip.top .tooltip-arrow {
        border-top-color: white;
      }
      .tooltip-inner {
        border: 1px solid white;
      }
    </style>
  </head>
  <body>
    <div id="map" class="map"><div id="info"></div></div>
    <script>
//      var styleCache = {};
      var styleFunction = function(feature) {
        var name = feature.get('name');
		var params = name.split(" ");
		var region =  params[0];
        var frequency = parseFloat(params[1]);
		var color_red = parseInt(params[2]);
		var color_green = parseInt(params[3]);
		var color_blue = parseInt(params[4]);

//		color_red = 255;
//		color_green = 0xff;
//		color_blue = 0xff;


//        var radius = 5 + 20 * (magnitude - 5);
//        var style = styleCache[radius];
//        if (!style) {
//          style = new ol.style.Style({
//            image: new ol.style.Circle({
//              radius: radius,
//              fill: new ol.style.Fill({
//                color: 'rgba(255, 153, 0, 0.4)'
//              }),
//              stroke: new ol.style.Stroke({
//                color: 'rgba(255, 204, 0, 0.2)',
//                width: 1
//              })
//            })
//          });
//          styleCache[radius] = style;
//        }
//        return style;
        return new ol.style.Style({
          fill: new ol.style.Fill({
            color: [color_red, color_green, color_blue, 0.2]
          }),
          stroke: new ol.style.Stroke({
            color: '#ffffff',
			width: 1
          })
        });



      };

      var vector = new ol.layer.Vector({
        source: new ol.source.Vector({
          url: 'geofencing.kml',
          format: new ol.format.KML({
            extractStyles: false
          })
        }),
        style: styleFunction
      });

      var raster = new ol.layer.Tile({
        source: new ol.source.Stamen({
          layer: 'toner'
        })
      });

      var map = new ol.Map({
        layers: [raster, vector],
        target: 'map',
        view: new ol.View({
          center: [0, 0],
          zoom: 2
        })
      });

      var info = $('#info');
      info.tooltip({
        animation: false,
        trigger: 'manual'
      });

      var displayFeatureInfo = function(pixel) {
        info.css({
          left: pixel[0] + 'px',
          top: (pixel[1] - 15) + 'px'
        });
        var feature = map.forEachFeatureAtPixel(pixel, function(feature) {
          return feature;
        });
        if (feature) {
          info.tooltip('hide')
              .attr('data-original-title', feature.get('name'))
              .tooltip('fixTitle')
              .tooltip('show');
        } else {
          info.tooltip('hide');
        }
      };

      map.on('pointermove', function(evt) {
        if (evt.dragging) {
          info.tooltip('hide');
          return;
        }
        displayFeatureInfo(map.getEventPixel(evt.originalEvent));
      });

      map.on('click', function(evt) {
        displayFeatureInfo(evt.pixel);
      });
    </script>
  </body>
</html>
